<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/lib/echarts.min.js"></script>
  <script src="/lib/jquery-1.7.2.min.js"></script>
</head>

<body>
  <div id="main" style="height:600px;width:800px;"></div>
  <script>
    const myEcharts = echarts.init(document.getElementById('main'))
    const airData = [
      { name: '上海', value: 95 },
      { name: '内蒙古', value: 95 },
      { name: '北京', value: 95 },
      { name: '天津', value: 95 },
      { name: '广东', value: 165 },
      { name: '黑龙江', value: 80 },
      { name: '安徽', value: 130 },
      { name: '湖北', value: 120 },
      { name: '陕西', value: 102 },
      { name: '湖南', value: 79 },
      { name: '西藏', value: 50 },
      { name: '山西', value: 200 },
      { name: '四川', value: 30 },
      { name: '辽宁', value: 30 },
      { name: '河北', value: 30 },
      { name: '山东', value: 30 },
      { name: '重庆', value: 20 },
      { name: '浙江', value: 66 },
      { name: '江苏', value: 92},
      { name: '台湾', value: 51},
      { name: '河南', value: 111},
      { name: '吉林', value: 98},
      { name: '云南', value: 45},
      { name: '宁夏', value: 72},
      { name: '青海', value: 68},
      { name: '甘肃', value: 149},
      { name: '贵州', value: 95},
      { name: '广西', value: 63},
      { name: '江西', value: 74},
      { name: '福建', value: 16},
      { name: '新疆', value: 82},
      { name: '海南', value: 23},
    ]
    const scatterData = [{value: [117.283042, 31.86119]}]
    // 通过 JQuery 中的 Ajax 请求地图数据
    $.get('json/map/china.json', ret => {
      // ret 就是中国各个省份的矢量地图数据信息
      // console.log(ret)
      // 注册地图数据
      echarts.registerMap('chinaMap', ret)
      const option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true, // 设置允许缩放和拖动
          label: {
            show: true // 展示标签
          }
        },
        series: [
          // 不同城市不同颜色
          {
            data: airData,
            geoIndex: 0, //将空气质量的数据和第0个geo配置关联起来
            type: 'map'
          },
          {
            type: 'effectScatter',  // 带有涟漪特效动画的散点（气泡）图
            data: scatterData, // 坐标数据
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 10
            }
          },
          {
            type: 'effectScatter',  // 带有涟漪特效动画的散点（气泡）图
            data: [
              { value: [105, 36]} // 经纬度
            ], //坐标数据
            coordinateSystem: 'geo', // 坐标系统必备
            rippleEffect: { // 涟漪特效相关配置
              scale: 10
            }
          },
        ],
        visualMap: {
          min: 0,
          max: 200,
          inRange: {
            color: ['white', 'blue'] // 控制颜色渐变的范围
          },
          calculable: true // 出现滑块
        }
      }
      myEcharts.setOption(option)
    })


  </script>
</body>

</html>